<template>
  <div>
    <canvas ref="canvas0" width='500' height='500'>
      Canvas not supported
    </canvas>
    <canvas ref="canvas1" width='500' height='500'>
      Canvas not supported
    </canvas>
  </div>
</template>

<script>
  import {CanvasUtil} from "./CanvasUtil";

  const canvas0Id = 'canvas0'
  const canvas1Id = 'canvas1'

  export default {
    name: 'DoubleBufferCanvas',
    data() {
      return {
        canvasCurrentId: null,
        canvasNewId: null,
      }
    },
    methods: {
      resize(borderSize = 60, menuSize = 180) {
        let canvas0 = this.getCanvas(canvas0Id)
        let canvas1 = this.getCanvas(canvas1Id)
        CanvasUtil.resizeCanvas(canvas0, borderSize, menuSize)
        CanvasUtil.resizeCanvas(canvas1, borderSize, menuSize)
      }
      ,
      beginDrawing() {
        let canvasNew = this.getCanvas(this.canvasNewId)
        return canvasNew
      }
      ,
      finishDrawing() {
        let temp = this.canvasNewId
        this.canvasNewId = this.canvasCurrentId
        this.canvasCurrentId = temp
        CanvasUtil.divSetVisible(this.getCanvas(this.canvasCurrentId), true)
        CanvasUtil.divSetVisible(this.getCanvas(this.canvasNewId), false)
        CanvasUtil.cleanCanvas(this.getCanvas(this.canvasNewId))
      },
      getCanvas(canvasId) {
        return this.$refs[canvasId]
      }
    },
    mounted() {
      // 双缓冲绘制
      this.canvasCurrentId = canvas0Id
      this.canvasNewId = canvas1Id
      // 设置新画布为不可见
      let canvasNew = this.getCanvas(this.canvasNewId)
      CanvasUtil.divSetVisible(canvasNew, false)
    }
  }
</script>

<style scoped>
</style>
